
import React from "react";
import { v4 as uuidv4 } from 'uuid';
import { ICapability } from "@/components/capability";
import { useVisible } from "@/tools/hooks";
import { server } from "@/views/Development/server";
import { Button, Drawer, Form, FormInstance, Input, Select, Space, message } from "antd";
import { dictionary } from '@/capabilityHooks'

/** 添加能力 */
export function useAddCapability(): ICapability {

    const { open, onClose, onOpen } = useVisible()

    const formRef = React.useRef<FormInstance>(null);

    const { moduleList } = useModuleList(open)

    const onStart = onOpen;

    const onFinish = React.useCallback(async values => {
        await server('/dev/capability/add', { method: 'POST', body: JSON.stringify(values) });
        message.success('添加成功');
        onClose();
    }, [onClose])

    const element = React.useMemo(() => {
        return (
            <Drawer
                title="添加能力"
                placement="right"
                onClose={onClose}
                open={open}
                footer={(
                    <Space style={{ width: '100%', justifyContent: 'end' }} >
                        <Button onClick={onClose} >取消</Button>
                        <Button onClick={() => { formRef.current?.submit() }} type='primary' >添加</Button>
                    </Space>
                )}
            >
                <Form
                    ref={formRef}
                    layout='vertical'
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="继承模版"
                        name="templateId"
                        rules={[
                            { required: true, message: '请输入名称' },
                        ]}
                    >
                        <Select
                            options={moduleList}
                            fieldNames={{ label: 'name', value: 'id' }}
                        />
                    </Form.Item>

                    <Form.Item
                        label="能力名称"
                        name="name"
                        rules={[
                            { required: true, message: '请输入名称' },
                            { max: 20, message: '最多20个字符' }
                        ]}
                    >
                        <Input placeholder="模块名称" />
                    </Form.Item>

                    <Form.Item
                        label="ID"
                        name="id"
                        initialValue='use'
                        rules={[
                            { required: true, message: '请输入ID' },
                            { max: 20, message: '最多20个字符' },
                            { pattern: /^use[A-Z][a-zA-Z0-9]+$/, message: 'use开头加一个大写字母，只能是英文数字' },
                            {
                                validator: (_rule, value) => {
                                    return dictionary.has(value) ? Promise.reject('ID已存在') : Promise.resolve()
                                }
                            }
                        ]}
                    >
                        <Input placeholder="请输入ID" />
                    </Form.Item>

                    <Form.Item
                        label="标签"
                        name="tag"
                        help="英文逗号‘,’隔开"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="简介"
                        name="description"
                    >
                        <Input.TextArea />
                    </Form.Item>
                </Form>
            </Drawer>
        )
    }, [moduleList, onClose, onFinish, open])

    return {
        id: uuidv4(),
        title: '添加能力',
        onStart,
        element,
    }
}


/** 模版列表 */
function useModuleList(open: boolean) {

    const [moduleList, setModuleList] = React.useState<any[]>([])

    React.useEffect(() => {
        if (!open) return;
        server('/dev/capability/templateList')
            .then(e => e.json())
            .then(setModuleList)
    }, [open])

    return {
        moduleList
    }
}